import SolidTooltip from "@lib/Tooltip";
import type { RouteDefinition } from "@solidjs/router";
import "./index.scss";

const TooltipDemo = () => {
  return (
    <div>
      <div>
        <h1>Link</h1>
        <p class="muted">
          Placeholder text to demonstrate some
          <SolidTooltip title={"Default tooltip"}>
            <a href="#" class="m-2">
              inline links
            </a>
          </SolidTooltip>
          with tooltips. This is now just filler, no killer. Content placed here
          just to mimic the presence of
          <SolidTooltip title={"Another tooltip"}>
            <a href="#">real text</a>
          </SolidTooltip>
          . And all that just to give you an idea of how tooltips would look
          when used in real-world situations. So hopefully you've now seen how
          <SolidTooltip
            as={(ctx: any) => (
              <a href="#" {...ctx}>
                these tooltips on links
              </a>
            )}
            title={"Another one here too"}
          ></SolidTooltip>
          can work in practice, once you use them on
          <SolidTooltip title="The last tip!">
            <a href="#" data-bs-toggle="tooltip" data-bs-title="">
              your own
            </a>
          </SolidTooltip>
          site or project.
        </p>
      </div>
      <div>
        <h1>Custom</h1>
        <SolidTooltip
          as={"button"}
          type="button"
          title="This top tooltip is themed via CSS variables."
          options={{ customClass: "custom-tooltip", placement: "top" }}
          class="btn btn-secondary"
        >
          Custom tooltip
        </SolidTooltip>
      </div>
      <div>
        <h1>With Html</h1>
        <SolidTooltip
          as="button"
          type="button"
          class="btn btn-secondary"
          options={{ html: true }}
          title={"<em>Tooltip</em> <u>with</u> <b>HTML</b>"}
        >
          Tooltip with HTML
        </SolidTooltip>
        {/* <button
          type="button"
          class="btn btn-secondary"
          data-bs-toggle="tooltip"
          data-bs-html="true"
          data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
        >
          Tooltip with HTML
        </button> */}
      </div>
    </div>
  );
};

export const TooltipDemoRoute: RouteDefinition = {
  path: "/tooltip",
  component: TooltipDemo,
};

export default TooltipDemo;
